body {
  --text-color: #{primary-color(700)};
  background-color: primary-color(50);
  transition: background-color 0.3s ease-in-out;

  @media (prefers-color-scheme: dark) {
    &:not(.light-mode) {
      --text-color: #{primary-color(300)};
      background-color: primary-color(950);
    }
  }

  &.dark-mode {
    --text-color: #{primary-color(300)};
    background-color: primary-color(950);
  }
}

[data-server-rendered='true'] {
  opacity: 0;
}

html:focus-within {
  scroll-behavior: smooth;

  @media (prefers-reduced-motion) {
    scroll-behavior: auto;
  }
}

// *, *:before, *:after {
//   outline: 1px solid red;
// }